<template>
  <el-tabs
    class="group-tabs"
    v-model="active"
    type="card"
    :stretch="false"
    tab-position="top"
    @tab-click="tabClick"
  >
    <el-tab-pane class="group-tab-pane" label="菜单属性" name="attr">
      <AttributeList
        :ref="'attr'"
        :entry="entry"
        :hide-keys="hideKeys"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="角色列表" name="roles">
      <RoleHolderList
        :ref="'roles'"
        :entry="entry"
        :comment="'显示直接持有此菜单的所有角色信息'"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="分组列表" name="groups">
      <GroupHolderList
        :ref="'groups'"
        :hold-type="TYPES.GROUP"
        :entry="entryPlat"
        :comment="'显示直接持有此菜单的所有分组信息'"
      />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="用户列表" name="users">
      <UserHolderList
        :ref="'users'"
        :hold-type="TYPES.USER"
        :entry="entryPlat"
        :comment="'显示直接持有此菜单的所有用户信息'"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import AttributeList from '@/views/sop/list/AttributeList.vue'
import RoleHolderList from '@/views/sop/holder/RoleHolderList.vue'
import UserHolderList from '@/views/sop/holder/UserHolderList.vue'
import GroupHolderList from '@/views/sop/holder/GroupHolderList.vue'

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/sop/UseListTabs";
import {ref} from "vue";

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('attr');

defineExpose({
  handleCurrent,
  handleSwitch,
})

const hideKeys = ref([
  'icon',
  'openMode',
  'hidden',
  'routeName',
  'routePath',
  'level',
  'component',
  'menuType',
  'keepAlive'
]);

const entry = ref({
  name: currentNames.MENU,
  type: TYPES.MENU,
  server: SERVERS.ASSET
});

const entryPlat = ref({
  name: currentNames.MENU,
  type: TYPES.MENU,
  server: SERVERS.PLATFORM
});

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}
</style>
